import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';

import Create from './Create';
import Manage from './Manage';
import Detail from './detail';
import Tag from './Tag';
import CreateTag from './CreateTag';
import ParterList from './ParterList';

@withRouter
@inject('communicationStore')
@observer
export default class Communication extends React.Component {

  render(){
    const { communicationStore: { createLayout, createTagLayout, detailLayout,parterListLayout, editTagLayout, editLayout, updateListData } } = this.props;
    return (
      <div>
        <Route
          key={detailLayout.id}
          // path={detailLayout.path}
          path='**/detail'
          render={() => (// 协作详情
            <RouteLayout>
              <div key="detail" className="wm-route-layout">
                <Detail updateListData={updateListData}/>
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={createLayout.id}
          // path={createLayout.path}
          path='**/createCowork'
          render={() => (// 新建协作
            <RouteLayout>
              <div key="createCowork" className="wm-route-layout">
                <Create />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={editLayout.id}
          path='**/edit'
          render={() => (// 编辑协作
            <RouteLayout>
              <div key="edit" className="wm-route-layout">
                <Create />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key='tag'
          // path={tagLayout.path}
          path='**/tag'
          render={() => (// 标记为
            <RouteLayout>
              <div key="tags" className="wm-route-layout">
                <Tag />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={createTagLayout.id}
          // path={createTagLayout.path}
          path='**/createTag'
          render={() => (// 新建标签
            <RouteLayout>
              <div key="createTag" className="wm-route-layout">
                <CreateTag />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          // key={manageLayout.id}
          key='manage'
          // path={manageLayout.path}
          path='**/manage'
          render={() => (// 标签管理
            <RouteLayout>
              <div key="manage" className="wm-route-layout">
                <Manage />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={editTagLayout.id}
          // path={createTagLayout.path}
          path='**/editTag'
          render={() => (// 编辑标签
            <RouteLayout>
              <div key="editTag" className="wm-route-layout">
                <CreateTag />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={parterListLayout.id}
          // path={parterListLayout.path}
          path='**/parterList'
          render={() => (// 添加参与范围列表
            <RouteLayout>
              <div key="parterList" className="wm-route-layout">
                <ParterList />
              </div>
            </RouteLayout>
          )}
        />
      </div>
    );
  }
}